<template>
    <div>
        <base-list ref="outHousePageList"
               :condition="condition"
               :isPaging="false">
            <el-row slot="search"
                    class="title-header">
                <div class="line"></div>
                <h3>闸口登记</h3>
            </el-row>
            <el-form :inline="true"
                    :model="condition"
                    class="search-form"
                    slot="search"
                    ref="aList"
                    label-width="100px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="IC卡信息">
                            <el-input v-model="form.cardNo" placeholder="请输入内容" @blur="getIcInfo"></el-input>
                            <el-button size="mini">读卡</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="车牌号">
                            <el-input v-model="form.carNo" placeholder="请输入内容"  @blur="getCarInfo"></el-input>
                            <el-button size="mini">扫描二维码</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="仓库">
                            <el-input v-model="form.warehouseName" disabled placeholder="请选择">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="进库过磅重量">
                            <el-input v-model="form.inLbsWeight" disabled placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出库过磅重量">
                            <el-input v-model="form.outStockWeight" disabled placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="过磅货重">
                            <el-input v-model="form.arriveWeight" disabled placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单据货重">
                            <el-input v-model="form.arriveWeight" disabled placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="磅差">
                            <el-input v-model="form.arriveWeight" disabled placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出库登记人">
                            <el-input v-model="form.arriveWeight" disabled placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出库时间">
                            <el-date-picker v-model="form.inRegisterTime" disabled type="date" placeholder="起始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="进库登记人">
                            <el-input v-model="form.arriveWeight" disabled placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="进库时间">
                            <el-date-picker v-model="form.inRegisterTime" disabled type="date" placeholder="起始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row> 
                    <el-col :span="20">
                        <el-button type="primary" @click="enterRegister('enter')">进闸登记</el-button>
                        <el-button type="primary" @click="enterRegister('open')">抬杆放行</el-button>
                        <el-button type="primary" @click="enterRegister('out')">出闸放行</el-button>
                    </el-col> 
                    <el-col :span="2">    
                        <el-button type="primary"  @click="handleList({path:'/goods/gates/history',name:'历史车辆记录查询'})">历史车辆查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="status">
                <el-row class="title-header">
                    <div class="line"></div>
                    <h3>在库车辆信息</h3>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        在库车辆数：2辆
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-button type="primary">修改车号</el-button> -->
                        <el-button type="primary" @click="handleBindIcCar">补办车卡</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-table slot="list"
                        :data="gateList"
                        border
                        max-height="550"
                        highlight-current-row
                        @current-change="handleCurrentChange">
                <el-table-column label="序号"
                                type="index"
                                width="50"></el-table-column>
                <el-table-column prop="selfNo"
                                label="IC卡自编号"
                                min-width="80"></el-table-column>
                <el-table-column prop="cardNo"
                                label="IC卡号"
                                min-width="120"></el-table-column>
                <el-table-column prop="carNo"
                                label="车牌号"
                                min-width="100">
                </el-table-column>
                <el-table-column prop="inPurpose"
                                label="车辆状态"
                                min-width="60">
                                <template slot-scope="scope">
                                    {{ scope.row.inPurpose | _filterGateStatus}}
                                </template>
                </el-table-column>
                <el-table-column prop="inRegisterTime"
                                label="进闸时间"
                                min-width="80"></el-table-column>
                <el-table-column prop="outRegisterTime"
                                label="出闸时间"
                                min-width="80">
                </el-table-column>
                <el-table-column prop="inLbsWeight"
                                label="进库过磅重量（吨）"></el-table-column>
                <el-table-column prop="inRegisterBy"
                                label="登记人"></el-table-column>
                <el-table-column prop="remark"
                                label="备注"></el-table-column>
            </el-table>
            <el-tabs  
                slot="list" 
                type="border-card" 
                v-if="isShowTable" 
                style="margin-top:30px"  
                @tab-click="handleClick"
                v-model="tabs">
                <el-tab-pane label="入库" name="first">
                    <el-table
                        :data="detailTable"
                        border
                        max-height="550">
                        <el-table-column label="序号"
                                        type="index"
                                        width="50"></el-table-column>
                        <el-table-column prop="transportWay"
                                        label="业务类型"
                                        min-width="80">
                                        <template slot-scope="scope">
                                            {{ scope.row.transportWay | _filterTransportModeType}}
                                        </template>
                                        </el-table-column>
                        <el-table-column prop="freightBillNo"
                                        label="单据号"
                                        min-width="120"></el-table-column>
                        <el-table-column prop="jobStatus"
                                        label="状态"
                                        min-width="100">
                                        <template slot-scope="scope">
                                            {{ scope.row.jobStatus | _filterJobStatus}}
                                        </template>
                        </el-table-column>
                        <el-table-column prop="cargoName"
                                        label="品名"
                                        min-width="60">
                        </el-table-column>
                        <el-table-column prop="normStr"
                                        label="规格"
                                        min-width="80">
                                        <template slot-scope="scope">
                                            {{scope.row.normOne + '*' + scope.row.normTwo + '*' + scope.row.normThree}}
                                        </template>
                                        </el-table-column>
                        <el-table-column prop="material"
                                        label="材质"
                                        min-width="80">
                        </el-table-column>
                        <el-table-column prop="madeBy"
                                        label="生产厂家"></el-table-column>
                        <el-table-column prop="inWeight"
                                        label="交接重量"></el-table-column>
                        <el-table-column prop="accountNum"
                                        label="实入件数"></el-table-column>
                        <el-table-column prop="accountWeight"
                                        label="实入重量"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="出库" name="second">
                    <el-table
                        :data="detailTable2"
                        border
                        max-height="550">
                        <el-table-column label="序号"
                                        type="index"
                                        width="50"></el-table-column>
                        <el-table-column prop="transportWay"
                                        label="业务类型"
                                        min-width="80">
                                        <template slot-scope="scope">
                                            {{ scope.row.outWay | _filterOutWay}}
                                        </template>
                                        </el-table-column>
                        <el-table-column prop="planNo"
                                        label="单据号"
                                        min-width="120"></el-table-column>
                        <el-table-column prop="status"
                                        label="状态"
                                        min-width="100">
                                        <template slot-scope="scope">
                                            {{ scope.row.status | _filterBillStatus}}
                                        </template>
                        </el-table-column>
                        <el-table-column prop="cargoName"
                                        label="品名"
                                        min-width="60">
                        </el-table-column>
                        <el-table-column prop="normStr"
                                        label="规格"
                                        min-width="80"></el-table-column>
                        <el-table-column prop="material"
                                        label="材质"
                                        min-width="80">
                        </el-table-column>
                        <el-table-column prop="madeBy"
                                        label="生产厂家"></el-table-column>
                        <el-table-column prop="planWeight"
                                        label="预提重量"></el-table-column>
                        <el-table-column prop="planNum"
                                        label="预提件数"></el-table-column>
                        <el-table-column prop="planCount"
                                        label="预提数量"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </base-list>
        <!-- 进闸出闸抬杆 -->
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="720px">
            <span v-html="contentData"></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">返 回</el-button>
                <el-button type="primary" @click="dialogVisible = false">强制进库</el-button>
            </span>
        </el-dialog>
        <!-- 修改车号 -->
        <el-dialog :title="editFormContent" :visible.sync="dialogFormVisible" width="720px">
            <el-form :model="editForm">
                <el-form-item label="原IC卡号：" label-width="100px">
                    {{choiceArr.cardNo}}
                </el-form-item>
                <el-form-item label="新IC卡号：" label-width="100px">
                    <el-input v-model="editForm.cardNo" autocomplete="off"></el-input>
                    <el-button size="mini">读卡</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="okEditCard">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import dateSlot from '@/components/date/dateSlot'
import {
    getGateRegister,
    enterGateRegister,
    getGateRegisterLists,
    outGateRegister,
    bindIcCard,
    passGateRegister,
    getGateDetail,
    getAcceptDetail
} from '@/api/things/gate'
import {
  getArrivalForecastList
} from '@/api/enter/arrivalForecast'
import {
    getPcOutStockPlan,
} from '@/api/things/out'
import {
    getIcCard, getIcCardList
} from '@/api/icCard/icCard'
export default {
    name: '闸口工作台',
    components: {dateSlot},
    data() {
        return {
            gateList: [],
            condition: {},
            choiceArr: {},
            dialogVisible:false,
            dialogFormVisible: false,
            contentData: '',
            dialogTitle: '',
            form: this.clearForm(),
            ids: '',
            icInfo: {},
            editForm: {
                cardNo: '',
                selfNo: ''
            },
            editFormContent: '',
            isShowTable: false,
            detailTable: [],
            detailTable2: [],
            tabs: 'first'
        }
    },
    mounted() {
        this.getGatelist()
    },
    methods: {
        clearForm() {
            return {
                orgId: '',
                orgId:
                this.$store.state.user.currentUser.org &&
                this.$store.state.user.currentUser.org.id,
                orgName:
                this.$store.state.user.currentUser.org &&
                this.$store.state.user.currentUser.org.name,
                deptId: this.$store.state.user.currentUser.dept.id,
                deptName: this.$store.state.user.currentUser.dept.name,
                inRegisterBy: this.$store.state.user.currentUser.name,
                outRegisterBy: this.$store.state.user.currentUser.name,
                remark: "",
                selfNo: "",
                carNo: "",
                cardNo: "",
                warehouseCode: "GY",
                warehouseName: "果园库"
            }
        },
        loadData() {
            let params = {
                search_EQ_orgId: this.form.orgId
            }
            params = this.$assist.copySearchConditions(params)
            getGateRegisterLists(params).then(res => {
                this.gateList = res.data.aaData
            })
        },
        getGatelist() {
            let that = this;
            let params = {
                search_EQ_orgId: this.form.orgId,
                search_LIKE_carNo: this.form.carNo,
                search_LIKE_cardNo: this.form.cardNo
            }
            params = this.$assist.copySearchConditions(params)
            getGateRegisterLists(params).then(function(res) {
                that.gateList = res.data.aaData
            })
        },
        //车牌号失去焦点
        getCarInfo() {
            // let params = {
            //     search_LIKE_transhipNo: this.form.carNo
            // }
            // getArrivalForecastList(params).then(res => {
            //     this.form = res.data.aaData[0]
            // })
            this.form.arriveNum = 15
            this.form.arriveWeight = 15
            this.form.customDeliveryNo= "35584"
            this.form.inLbsWeight= 35.5
            this.form.inRegisterTime= "2019-01-01 00:00:00"
            this.form.inStorageEntrustNo= "99998"
            this.form.inStoragePlanNo= "99998"
            this.form.outStockEntrustNo= "35584"
            this.form.outStockPlanNo= "35584"
            this.form.outStockWeight= 10
            this.form.plankWeight= 10
        },
        //通过ic卡获取车辆及闸口登记ID
        getIcInfo() {
            getIcCardList({search_LIKE_cardNo:this.form.cardNo}).then(res => {
                this.icInfo = res.data.aaData[0]
                this.form.selfNo = this.icInfo.selfNo;
                this.form.carNo = this.icInfo.carNo;
                let params = {
                    search_EQ_orgId: this.form.orgId,
                    search_LIKE_carNo: this.form.carNo,
                    search_LIKE_cardNo: this.form.cardNo
                }
                params = this.$assist.copySearchConditions(params)
                getGateRegisterLists(params).then(res => {
                    if(res.data.aaData.length > 0) {
                        this.ids = res.data.aaData[0].id
                    }
                })
            })
        },
        //获取IC卡卡自编号
        getSelfIc(cb) {
            getIcCardList({search_LIKE_cardNo:this.form.cardNo}).then(res => {
                this.icInfo = res.data.aaData[0]
                this.form.selfNo = this.icInfo.selfNo;
                this.form.carNo = this.icInfo.carNo;
                return cb(this.form.selfNo)
            })
        },
        handleCurrentChange(val) {
            this.choiceArr = val
            this.handleGateDetail()
        },
        handleClick(tab, event) {
            console.log(tab.name, event)
            if(tab.name == 'first') {
                this.handleGateDetail()
            }else{
                this.handleOutGateDetail()
            }
        },
        handleGateDetail() {
            let params = {
                search_EQ_inWay: 'QCRK',
                search_LIKE_transhipNo: this.choiceArr.carNo
            }
            getAcceptDetail(params).then(res => {
                this.$nextTick(() => {
                    this.isShowTable = true;
                    this.detailTable = res.data.aaData
                })
            })
        },
        handleOutGateDetail() {
            //出库单列表
            let params = {
                search_LIKE_carNo: this.choiceArr.carNo
            }
            getPcOutStockPlan(params).then(res => {
                this.detailTable2 = res.data.aaData
            })
        },
        // 列表快速查询
        handleList(url) {
            this.$store.commit('ADD_CACHED_VIEWS', url)
            this.$router.push(url.path)
        },
        enterRegister(t) {
            if(t == 'enter') {
                this.handleEnter()
            }else if(t == 'open') {
                this.handleOpen()
            }else{
                this.handleOut()
            }
        },
        handleEnter() {
            this.form.arriveNum = 15
            this.form.arriveWeight = 15
            this.form.customDeliveryNo= "35584"
            this.form.inLbsWeight= 35.5
            this.form.inRegisterTime= "2019-01-01 00:00:00"
            this.form.inStorageEntrustNo= "99998"
            this.form.inStoragePlanNo= "99998"
            this.form.outStockEntrustNo= "35584"
            this.form.outStockPlanNo= "35584"
            this.form.outStockWeight= 10
            this.form.plankWeight= 10
            
            enterGateRegister(this.form).then(res => {
                if(res.code == 200) {
                     this.$message({
                        showClose: true,
                        message: '进闸成功',
                        type: 'success'
                    });
                    this.loadData()
                }else{
                    this.dialogVisible = true;
                    this.dialogTitle = '进闸登记'
                    this.contentData = '该车辆未办理任何单据！'
                }
            })
            
        },
        handleOpen() {
            passGateRegister(this.ids).then(res => {
                if(res.code == 200) {
                     this.$message({
                        showClose: true,
                        message: '放行成功',
                        type: 'success'
                    });
                }else{
                    this.dialogVisible = true;
                    this.dialogTitle = '抬杆进闸'
                    let weight = '3.5t' 
                    let str = "<h3>货物过磅重量与单据重量相差过大,请检查！</h3>"
                    str += "<p>货物过磅重量：" + weight + "单据重量：1.000吨   磅差：2.500吨</p>" 
                    this.contentData = str
                }
            })
        },
        // 补卡
        handleBindIcCar() {
            if(!this.choiceArr.id) {
                this.$message({
                    showClose: true,
                    message: '请选择一条数据',
                    type: 'error'
                });
                return false
            }
            this.dialogFormVisible = true
            this.editFormContent = '补办车卡'
        },
        // 补卡
        okEditCard() {
            this.getSelfIc(data => {
                let params = {
                    cardNo: this.editForm.cardNo,
                    selfNo: data
                }
                bindIcCard(this.choiceArr.id,params).then(res => {
                    this.$message({
                        showClose: true,
                        message: '补卡成功',
                        type: 'success'
                    });
                    this.loadData()
                    this.dialogFormVisible = false
                })
            })
        },
        //出闸登记
        handleOut() {
            this.form.outRegisterTime= '2019-01-01 00:00:00'
            this.form.outLbsWeight= 35.5
            this.form.outRegisterTime= "2019-01-01 00:00:00"
            this.form.outStockWeight= 10

            outGateRegister(this.ids,this.form).then(res => {
                if(res.code == 200) {
                     this.$message({
                        showClose: true,
                        message: '出闸成功',
                        type: 'success'
                    });
                }else{ 
                    this.dialogVisible = true;
                    this.dialogTitle = '出闸登记'
                    let weight = '3.5t' 
                    let str = "<h3>货物过磅重量与单据重量相差过大,请检查！</h3>"
                    str += "<p>货物过磅重量：" + weight + "单据重量：1.000吨   磅差：2.500吨</p>" 
                    this.contentData = str
                }
            })
        }
    }
}
</script>
<style scoped>
.title-header {
  width: 90%;
  display: flex;
  height: 30px;
  margin-bottom: 20px;
}
h3 {
  margin-left: 10px;
}
.line {
  border-left: solid 5px #00a1ff;
  height: 18px;
  margin-top: 5px;
}
</style>


